<template>
	<view class="content poRel">
		<view class="hei86 wid90 mar dis disAl foSi25" style="justify-content: flex-end;">
			<view class="dis disAl" @click="xuan = xuan == 1?2:1">
				<view class="mar-right10">上传{{xuan == 1?'视频':'图片'}}</view>
				<uni-icons type="right" size="30rpx"></uni-icons>
			</view>
		</view>
		<view class="wid85 mar">
			<view v-if="xuan == 1" class="dis disAl disJuB flwa" >
				<block v-for="(item,index) in imageList" :key="index">
					<view class="borRad20 mar-top30 poRel" style="width: 281rpx;height: 281rpx;overflow: hidden;">
						<view @click="shanchu(index)" class="poAbs" style="right: 0;top: 0;z-index: 5;">
							<uni-icons type="closeempty" class="close" size="20"></uni-icons>
						</view>
						<image :src="url+item" class="wh100"></image>
					</view>
				</block>
				<view class="borRad20 mar-top30" v-if="imageList.length < 9" @click="shangImage"
					style="width: 281rpx;height: 281rpx;background-color: #F2F2F2;">
					<view style="height: 90rpx;"></view>
					<view class="mar" style="width: 72rpx;height: 59rpx;">
						<image src="../../static/shangchuan.png" class="wh100"></image>
					</view>
					<view class="foSi25 mar-top20 textCen" style="color: #989797;">
						<view>上传图片</view>
						<view>{{imageList.length}}/9</view>
					</view>
				</view>
			</view>
			<view v-if="xuan == 2" class="dis disAl disJuB" >
				<view v-if="image" class="borRad20 mar-top30 poRel" @click="shangImage"
					style="width: 281rpx;height: 281rpx;overflow: hidden;">
					<image :src="url+image" class="wh100"></image>
				</view>
				<view v-if="!image" class="borRad20 mar-top30" @click="shangImage"
					style="width: 281rpx;height: 281rpx;background-color: #F2F2F2;">
					<view style="height: 90rpx;"></view>
					<view class="mar" style="width: 72rpx;height: 59rpx;">
						<image src="../../static/shangchuan.png" class="wh100"></image>
					</view>
					<view class="foSi25 mar-top20 textCen" style="color: #989797;">上传封面</view>
				</view>
				<view v-if="!video" class="borRad20 mar-top30" @click="shangVideo"
					style="width: 281rpx;height: 281rpx;background-color: #F2F2F2;">
					<view style="height: 90rpx;"></view>
					<view class="mar" style="width: 72rpx;height: 59rpx;">
						<image src="../../static/shangchuan.png" class="wh100"></image>
					</view>
					<view class="foSi25 mar-top20 textCen" style="color: #989797;">上传视频</view>
				</view>
				<view v-if="video" class="borRad20 mar-top30 poRel"
					style="width: 281rpx;height: 281rpx;overflow: hidden;">
					<video :src="url+video" class="wh100"></video>
				</view>
			</view>
			<view class="hei80 mar-top30 dis disAl" style="border-bottom: 1px solid #D2D2D2;">
				<input class="foSi35 wid100" v-model="title" placeholder="填写标题会有更多赞呦~"/>
			</view>
			<view class="mar-top30" style="height: 256rpx;">
				<textarea class="wid100 foSi25" style="line-height: 40rpx;" placeholder="还有更多的想法也一起写到正文里吧~" v-model="text" auto-height />
			</view>
			<!-- <view class="mar-top10 dis disAl" @click="getLocation()">
				<uni-icons type="location" size="35rpx"></uni-icons>
				<view class="mar-left10 mar-right10 foSi25">{{address?address:'添加地址'}}</view>
				<uni-icons type="right" size="25rpx"></uni-icons>
			</view> -->
			<view style="height: 50rpx;"></view>
			<view class="poFix wid100 dis disAl disJuC" style="height: 124rpx;bottom: 0; left: 0;">
				<view class="hei80 borRad40 dis disAl disJuC coFFF foSi30" @click="fabu()"
					style="width: 50%;" :style="'background-color: '+theme.main_color+';'">发布</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.global.url,
				xuan: 1,
				image: null,
				imageList: [],
				source: null,
				video: null,
				title: null,
				text: null,
				address: null,
				lon: null,
				lat: null,
				theme: null
			}
		},
		onLoad() {
			this.theme = uni.getStorageSync('theme')
			// this.getLocation()
		},
		methods: {
			fabu(){
				var that = this;
				if(!that.title){return uni.showToast({title: '请输入标题',icon: 'error',duration: 2000})};
				if(!that.source && that.xuan == 1){return uni.showToast({title: '请上传图片',icon: 'error',duration: 2000})};
				if(!that.image && that.xuan != 1){return uni.showToast({title: '请上传视频封面',icon: 'error',duration: 2000})};
				if(!that.video && that.xuan != 1){return uni.showToast({title: '请上传视频',icon: 'error',duration: 2000})};
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/trends/add',
					method: "POST",
					header: {
						'site-id': that.global.site_id,//自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						title: that.title,
						source: that.xuan == 1?that.source:that.video,
						trends_coverimg: that.xuan == 1?that.imageList[0]:that.image,
						content: that.text,
						type: that.xuan == 1?'image':'video',
						address: that.address?that.address:'长春市',
						lon: that.lon?that.lon:125.35043,
						lat: that.lat?that.lat:43.86414,
					},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							uni.navigateBack(1)
						}else{
							uni.showToast({
								title: result.msg,
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'error',
								//显示持续时间为 2秒
								duration: 2000
							}) 
						}
					}
				})
				
			},
			// 获取定位所在城市
			getLocation() {
				var that = this
				uni.getLocation({
					type: 'wgs84',
					success: async (res) => {
						that.lat = res.latitude
						that.lon = res.longitude
						//调用地址解析接口
						that.$jsonp('https://apis.map.qq.com/ws/geocoder/v1/?location=', {
							key: 'MGJBZ-YHIKI-B4DGL-UPRDI-CIN7Z-UFB7H',
							location: res.latitude+','+res.longitude,
							output: 'jsonp'
						}).then(res => {
							console.log(res.result)
							that.address = res.result.address
						}).catch(err => {
							console.log(err);
						});
						
					}
				});
			},
			shanchu(index){
				var that = this;
				console.log(index)
				this.imageList.splice(index, 1);
				for (var i=0; i<this.imageList.length; i++) {
					if(i == 0){
						that.source = this.imageList[i]
					}else{
						that.source = ','+this.imageList[i]
					}
				}
			},
			//上传图片
			shangImage(){
				// #ifdef APP
				var xiangce = 0;
				var xiangji = 0;
				const permission = 'android.permission.WRITE_EXTERNAL_STORAGE'; // 要检查的权限
				const android_camera = 'android.permission.CAMERA';
				plus.android.checkPermission(
				  permission,
				  granted => {
					  console.log(granted);
					if (granted.checkResult == '-1') {
					  console.log('相册未授权');
					  xiangce = 1;
					}
				  },
				  error => {
					console.error('Error checking permission:', error.message);
				  }
				);
				plus.android.checkPermission(
					android_camera,
					granted => {
						console.log(granted);
						if (granted.checkResult == '-1') {
						  console.log('相机未授权');
						  xiangji = 1;
						}
					},
					error => {
						console.error('Error checking permission:', error.message);
					}
				);
				setTimeout(function(){
					console.log(xiangce);
					console.log(xiangji);
					if(xiangce == 1 && xiangji == 1){
						uni.showModal({
							title: '提示',
							content: that.global.name+'对存储空间/照片/相机/摄像头权限申请说明：便于您使用该功能上传您的照片/图片/视频及用于更换头像、意见反馈、举报用户、保存相册、发布动态、下载与客服沟通等场景中读取和写入相册和文件内容。',
							success: function (res) {
								if (res.confirm) {
									that.picopsshow = true;
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							},
						})
					}else if(xiangce == 1 && xiangji == 0){
						uni.showModal({
							title: '提示',
							content: that.global.name+'对存储空间/照片/相机/摄像头权限申请说明：便于您使用该功能上传您的照片/图片/视频及用于更换头像、意见反馈、举报用户、保存相册、发布动态、下载与客服沟通等场景中读取和写入相册和文件内容。',
							success: function (res) {
								if (res.confirm) {
									that.picopsshow = true;
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							},
						})
					}else if(xiangce == 0 && xiangji == 1){
						uni.showModal({
							title: '提示',
							content: that.global.name+'对存储空间/照片/相机/摄像头权限申请说明：便于您使用该功能上传您的照片/图片/视频及用于更换头像、意见反馈、举报用户、保存相册、发布动态、下载与客服沟通等场景中读取和写入相册和文件内容。',
							success: function (res) {
								if (res.confirm) {
									that.picopsshow = true;
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							},
						})
					}else{
						that.picopsshow = true;
					}
				},100)
				// #endif
				var that = this
				var count = that.xuan == 1?9 - that.imageList.length:1
				uni.chooseImage({
					count: count,
					success:(res)=>{
						for (var i=0; i<res.tempFilePaths.length; i++) {
							that.shangchuan(res.tempFilePaths[i],0)
						}
					},
				})
			},
			//上传视频
			shangVideo(){
				var that = this
				uni.chooseVideo({
					count: 1, //选择多少个视频
					sourceType: ['album', 'camera'], //视频来源相册和相机都可以
					maxDuration: 60,
					camera: 'back', //默认摄像头是后置摄像头
					success:(res)=>{
						console.log(res.tempFilePath)
						that.shangchuan(res.tempFilePath,1)
					},
				})
			},
			shangchuan(tempFilePaths,i){
				var that = this
				uni.uploadFile({
					url: that.global.url + 'api/qianyu_smfw/common/file_upload',
					header: {
						"token": uni.getStorageSync('token'),
						'site-id':that.global.site_id
					}, //请求token	
					filePath: tempFilePaths,
					name: 'file',
					success: (res) => {
						var apiresult = JSON.parse(res.data)
						if (apiresult.code == 1) {
							console.log(apiresult.data);
							if(that.xuan == 1){
								if(that.imageList.length == 0){
									that.source = apiresult.data
								}else{
									that.source += ','+apiresult.data
								}
								that.imageList = that.imageList.concat(apiresult.data);
							}else{
								if(i == 1){
									that.video = apiresult.data;
								}else{
									that.image = apiresult.data;
								}
							}
						} else {
							uni.showToast({
								title: apiresult.msg,
								icon:'error',
								duration: 2000
							})
						}
					},
					fail() {
						uni.showToast({
							title: "网络连接失败",
							icon:'error',
							duration: 2000
						})
					}
				});
			},
		}
	}
</script>

<style>
	.content {
		height: 100vh;
	}
</style>